<template>
    <div class="mod-log">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-row>
                <el-form-item label="地区ID">
                    <el-input v-model="dataForm.areaId" placeholder="地区ID" clearable></el-input>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="dataForm.areaName" placeholder="地区名" clearable></el-input>
                </el-form-item>
                <el-form-item label="地区类型">
                    <el-input-number v-model="dataForm.areaLevel" :min="-1" :max="5" label="地区类型"></el-input-number>
                </el-form-item>
                <el-form-item label="上级ID">
                    <el-input v-model="dataForm.parentAreaId" placeholder="上级地区ID" clearable></el-input>
                </el-form-item>
                <el-form-item label="全称">
                    <el-input v-model="dataForm.fullName" placeholder="地区全名" clearable></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <el-form-item>
                        <el-button @click="getDataList()" type="primary" plain icon="el-icon-search" size="medium">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table
            :data="dataList"
            border
            v-loading="dataListLoading"
            style="width: 100%">
            <el-table-column
                prop="id"
                header-align="center"
                align="center"
                width="160"
                label="ID">
            </el-table-column>
            <el-table-column
                prop="areaId"
                header-align="center"
                align="left"
                width="120"
                label="地区id">
            </el-table-column>
            <el-table-column
                prop="areaName"
                header-align="center"
                align="center"
                width="120"
                label="地区名称">
            </el-table-column>
            <el-table-column
                prop="parentAreaId"
                header-align="center"
                align="left"
                width="100"
                :show-overflow-tooltip="true"
                label="上级地区ID">
            </el-table-column>
            <el-table-column
                prop="postCode"
                header-align="center"
                align="center"
                width="60"
                :show-overflow-tooltip="true"
                label="邮政id">
            </el-table-column>
            <el-table-column
                prop="fullName"
                header-align="center"
                align="center"
                width="130"
                label="全称">
            </el-table-column>
            <el-table-column
                prop="abbrCn"
                header-align="center"
                align="center"
                width="130"
                label="中文简称">
            </el-table-column>
            <el-table-column
                prop="pinYin"
                header-align="center"
                align="center"
                width="140"
                label="拼音">
            </el-table-column>
            <el-table-column
                prop="longitude"
                header-align="center"
                align="left"
                width="120"
                label="经度">
            </el-table-column>
            <el-table-column
                prop="latitude"
                header-align="center"
                align="left"
                width="120"
                label="纬度">
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

    </div>
</template>

<script>
    import {getRegionInfoByPage} from '../../api/api';
    import {getTime} from '../../api/commonUtil';

    export default {
        data() {
            return {
                dataForm: {
                    areaId: '',
                    areaName: '',
                    areaLevel: '-1',
                    parentAreaId: '',
                    fullName: '',
                    key: ''
                },
                fileList: [{name: 'food2.jpeg', url: ''}],
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                total: 0,
                dataListLoading: false,
                selectionDataList: []
            }
        },
        created() {
            this.getDataList();
        },
        methods: {
            formatDate: function (row, column) {
                return row.createDate == null ? 'NUll' : getTime(row.createDate);
            },
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true;
                let params = {
                    'areaId': this.dataForm.areaId,
                    'areaName': this.dataForm.areaName,
                    'areaLevel': this.dataForm.areaLevel,
                    'parentAreaId': this.dataForm.parentAreaId,
                    'fullName': this.dataForm.fullName,
                    'currentPage': this.pageIndex,
                    'pageSize': this.pageSize
                }
                getRegionInfoByPage(params).then((res) => {
                    if (res.status) {
                        this.dataList = res.data.list
                        this.total = parseInt(res.data.totalCount)
                        this.pageIndex = parseInt(res.data.currPage)
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                });
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            }
        }
    }
</script>
<style>
    .upload-demo {
        padding: 0 0 20px 25px ;
        width: 360px;
    }
</style>
